<script setup>

import {computed, reactive, toRefs} from "vue";

let person = reactive({
  surname: '张',
  name: '三',
})

let {surname, name} = toRefs(person)

// 添加缺失的事件处理函数
const changeSuername = (event) => {
  person.surname = event.target.value;
}

const changeName = (event) => {
  person.name = event.target.value;
}

let fullName1 = () => {
  // 每调用函数，都会执行里面的代码
  console.log("执行fullName函数")
  return person.surname + person.name
}


let fullName2 = computed(() => {
  // 如果计算属性的监听到值没有变化，则不会执行当前的计算属性函数，会读取缓存的结果
  // 如果计算属性的监听到值有变化，则执行当前的计算属性函数
  console.log("执行computed")
  return person.surname + person.name
})

</script>

<template>
  <div class="container">
    <div class="container">
      <div>姓：<input type="text" v-bind:value="surname" v-on:input="changeSuername"></div>
      <div>名：<input type="text" :value="name" @input="changeName"></div>
      <div>全名：{{ fullName1() }}</div>
      <div>全名：{{ fullName1() }}</div>
      <div>全名：{{ fullName2 }}</div>
      <div>全名：{{ fullName2 }}</div>
    </div>
  </div>

</template>
